<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
    	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
    	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
		<title></title>
		<link href="../../css/lanai-ui.css" rel="stylesheet" />
	</head>
	<body>
		<section class="content no-pad-top">
			<div class="box box-widget">
				<div class="box-body">
					<h3>
						默认表格
					</h3>
					<div class="row">
						<div class="col-sm-12">
							<table class="table">
								<thead>
									<tr>
					                  <th style="width: 60px">编号</th>
					                  <th>任务</th>
					                  <th>进度</th>
					                  <th style="width: 60px">完成量</th>
					                </tr>
								</thead>
				                <tbody>				                	
					                <tr>
					                  <td>1.</td>
					                  <td>更新软件</td>
					                  <td>
					                    <div class="progress progress-xs">
					                      <div class="progress-bar progress-bar-danger" style="width: 55%"></div>
					                    </div>
					                  </td>
					                  <td><span class="badge bg-red">55%</span></td>
					                </tr>
					                <tr>
					                  <td>2.</td>
					                  <td>清理数据库缓存</td>
					                  <td>
					                    <div class="progress progress-xs">
					                      <div class="progress-bar progress-bar-yellow" style="width: 70%"></div>
					                    </div>
					                  </td>
					                  <td><span class="badge bg-yellow">70%</span></td>
					                </tr>
					                <tr>
					                  <td>3.</td>
					                  <td>测试运行环境</td>
					                  <td>
					                    <div class="progress progress-xs progress-striped active">
					                      <div class="progress-bar progress-bar-primary" style="width: 30%"></div>
					                    </div>
					                  </td>
					                  <td><span class="badge bg-light-blue">30%</span></td>
					                </tr>
					                <tr>
					                  <td>4.</td>
					                  <td>发现Bug并修复</td>
					                  <td>
					                    <div class="progress progress-xs progress-striped active">
					                      <div class="progress-bar progress-bar-success" style="width: 90%"></div>
					                    </div>
					                  </td>
					                  <td><span class="badge bg-green">90%</span></td>
					                </tr>
					                <tr>
					                  <td>5.</td>
					                  <td>安装新版本</td>
					                  <td>
					                    <div class="progress progress-xs progress-striped">
					                      <div class="progress-bar progress-bar-danger" style="width: 60%"></div>
					                    </div>
					                  </td>
					                  <td><span class="badge bg-danger">60%</span></td>
					                </tr>					                
				              	</tbody>
							</table>
						</div>						
					</div>
					<div class="row">
						<div class="col-sm-12">
							<button type="button" class="btn btn-primary" value="table-bordered">边框<br /><code>.table-bordered</code></button>
							<button type="button" class="btn btn-default" value="table-condensed">宽高自适应<br /><code>.table-condensed</code></button>
							<button type="button" class="btn btn-success" value="table-striped">隔行变色<br /><code>.table-striped</code></button>
							<button type="button" class="btn btn-info" value="table-hover">鼠标浮动变色<br /><code>.table-hover</code></button>
						</div>
					</div>
				</div>
			</div>
		</section>
		<script src="../../js/jquery.min.js"></script>
    	<script src="../../js/lanai-ui.js"></script>
    	<script type="text/javascript">
    		$(function(){
    			$(".btn").click(function(){
    				var that=this;
    				$(".table").toggleClass($(that).val());
    			})
    		});
    	</script>
	</body>
</html>
